$(document).ready(function() {	
	$.post('obtainMatch.do',
			function(data) {
				
				$.each(data.cards, function (index, card) {
			       if(card.cardType == "Luchador") {
			    	   $('body').append(fighterHTML(card));
			       } else {
			    	   $('body').append(kiHTML(card));
			       }
				});
				
			},
			'JSON');
});

function kiHTML(ki) {
	return '<div class="card">' +
	'<div class="ki-card">' +
	'<img class="ki-image" alt="KI" src="http://3.bp.blogspot.com/_gBCqCFzzgb4/RtXrNNK7AZI/AAAAAAAABVk/4mrsFrdVnuA/s400/ki.jpg">' +
	'</div>'+
	'</div>';
}

function fighterHTML(fighter) {
	
	return '<div class="card fighter">' +
	'<div class="hp"> HP ' + fighter.hp + '</div>' +
	'<div class="fighter-image-container">' +
	 '<img class="fighter-image" alt="imagen-del-luchador" src="http://t2.gstatic.com/images?q=tbn:ANd9GcRYclHmBP2AfG8sSUXnqMWq9FcycGRnLSPqb7VJY5G_bQdC9GLIdLV388qP">' +
	'</div>' +
	 '<div class="fighter-name">' + fighter.name + '</div>' +
	 attacksHTML(fighter.attacks) +
	 '</div>'; 
	
}

function attacksHTML(attacks) {
	var attackCode = '';
	$.each(attacks, function (index, attack) {
	       attackCode += '<div class="attack">' +
	       				 getKiCondition(attack) +
	       				 '<span class="attack-name">'+ attack.name + '</span>' +
	       				 '<span class="damage">'+ attack.initialDamage +'</span>'+'</div>';
		});
	
	return attackCode;
}

function getKiCondition(attack) {
	var kiLevel= '<div class="ki-condition">';
	for(i = 0; i < attack.kiLevelCondition; i++) {
		kiLevel += '<div class="ki"></div>';
	} 
	kiLevel += '</div>';
	return kiLevel;
}



